<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>商品分类</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<include file="public/comm" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav fs_xl">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left fs_xxi"></a>
		    <a href="#ch_nav" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" id="ch_ri"></a>
		    <h1 class="mui-title fs_xl">商品分类</h1>
		</header>
		<include file="public/bottom_nav" />
		<div class="ch_nav cls" id="ch_nav">
			<div class="ch_box">
				<div class="ch_box_m">
				<div class="ch_list">
					<div class="ch_tit fs_l">香型<i class="mui-icon mui-icon-arrowdown fs_xl"></i></div>
					<div class="ch_item cls">
						<ul class="cls" id="aroma">
							<foreach name="aroma" item="vo" key="k">
							<li data-val="{$vo.id}">
								<a class=""><em class="fs_xs">{$vo.title}</em></a>
							</li>
							</foreach>
						</ul>
					</div>
				</div>
				<div class="ch_list">
					<div class="ch_tit fs_l">窖藏主题<i class="mui-icon mui-icon-arrowdown fs_xl"></i></div>
					<div class="ch_item cls">
						<ul class="cls" id="theme">
							<foreach name="theme" item="vo" key="k">
							<li data-val="{$vo.id}">
								<a class=""><em class="fs_xs">{$vo.title}</em></a>
							</li>
							</foreach>
						</ul>
					</div>
				</div>
				<div class="ch_list">
					<div class="ch_tit fs_l">窖藏方式<i class="mui-icon mui-icon-arrowdown fs_xl"></i></div>
					<div class="ch_item cls">
						<ul class="cls" id="cellartype">
							<foreach name="cellartype" item="vo" key="k">
							<li data-val="{$vo.id}">
								<a class=""><em class="fs_xs">{$vo.title}</em></a>
							</li>
							</foreach>
						</ul>
					</div>
				</div>
				<div class="ch_list">
					<div class="ch_tit fs_l">原产地<i class="mui-icon mui-icon-arrowdown fs_xl"></i></div>
					<div class="ch_item cls">
						<ul class="cls" id="winery">
							<foreach name="origin" item="vo" key="k">
							<li data-val="{$vo.id}">
								<a class=""><em class="fs_xs">{$vo.title}</em></a>
							</li>
							</foreach>
						</ul>
					</div>
				</div>
				<div class="ch_list">
					<div class="ch_tit fs_l">窖藏数量（L/坛）<i class="mui-icon mui-icon-arrowdown fs_xl"></i></div>
					<div class="ch_item cls">
						<ul class="cls" id="quantity">
							<foreach name="cellar_quantity" item="vo" key="k">
							<li data-val="{$vo.id}">
								<a class=""><em class="fs_xs">{$vo.val}L/坛</em></a>
							</li>
							</foreach>
						</ul>
					</div>
				</div>
				</div>
				<div class="ch_btn">
					<a class="ch_res">取消</a>
					<a class="ch_sub">完成</a>
				</div>
			</div>
			<div class="left_kb" style="width:25%;float: left;height: 100%;background: transparent;"></div>
		</div>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper ch_nav_t fs_xl" style="padding-bottom: 3em;">
			<div class="mui-scroll fs_xl pr_m">
				<ul class="mui-table-view mui-table-view-chevron fs_xl" id="goodslist" style="margin-top: 0;">
					<foreach name="searchgoods" item="vo" key="k">
					<li class="mui-table-view-cell fs_xl cls">
						<a class="fs_xl cls" href="{:U('Cellar/goodsInfo',array('id'=>$vo.goods_id))}">
							<div class="pr_info fs_xl fr">
								<p class="fs_m">{$vo.goods_name}</p>
								<p class="fs_xs"><i class="mui-icon iconfont icon-huangye_dianpumingcheng fs_xl"></i><em>{$vo.suppliers_name}</em></p>
								<p class="fs_m">
									<foreach name="vo.themeList" item='v' key='kk'><span class="span1 fs_xxs">{$v.title}</span></foreach>
									<foreach name="vo.aroma" item='v' key='kk'><span class="span2 fs_xxs">{$v.title}</span></foreach>								
								</p>
								<p class="fs_m"><span class="span3 fs_xl">¥{$vo.shop_price}/坛</span><span class="span4 fs_xxs">{$vo.sales_sum}坛已售</span></p>
							</div>
							<div class="pr_img fs_xl fl">
								<img src="{$vo.original_img}" />
							</div>
						</a>
					</li>
					</foreach>
				</ul>
			</div>
		</div>
		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
//					down: {
//						callback: pulldownRefresh
//					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			/**
			 * 下拉刷新具体业务实现
			 */
            var count = 0;
			var pagesum = {$pagesum};
			var limit = {$limit};//设置请求条数
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > pagesum)); //参数为true代表没有更多数据了。
					getdatas('pullRefresh',limit*count);
				}, 1500);
			}
//			if (mui.os.plus) {
//				mui.plusReady(function() {
//					setTimeout(function() {
//						mui('#pullrefresh').pullRefresh().pullupLoading();
//					}, 10);
//
//				});
//			} else {
//				mui.ready(function() {
//					mui('#pullrefresh').pullRefresh().pullupLoading();
//				});
//			}
			//Ajax请求数据,mod为pullRefresh则是上拉加载数据，不需要重置数据，其他情况则必须重置数据
			function getdatas(mod,start){
				var aroma_id = $('#aroma .ch_right').attr("data-val");
				var type_id = $('#cellartype .ch_right').attr("data-val");
				var theme_id = $('#theme .ch_right').attr("data-val");
				var origin_id = $('#winery .ch_right').attr("data-val");
				var quantity = $('#quantity .ch_right').attr("data-val");
				
				$.post("{:U('Cellar/categoryList')}",{'start':start,'limit':limit,'aroma_id':aroma_id,'type_id':type_id,'theme_id':theme_id,'origin_id':origin_id,'quantity':quantity},function(content){
					if(content.status == 1){
						if(mod != 'pullRefresh'){
							$("#goodslist").html(" ");//重置数据
						}
						var table = document.body.querySelector('.mui-table-view');
 						pagesum = content.data.pagesum;
 						//console.log(content.data.pagesum);
                        $.each(content.data.searchgoods, function(i,goods) {
                        	var li = document.createElement('li');
							li.className = 'mui-table-view-cell';
							li.innerHTML = '<a class="fs_xl" href="/mobile/Cellar/goodsInfo/id/'+goods.goods_id+'">'+'<div class="pr_info fs_xl fr">'+
							'<p class="fs_m">'+goods.goods_name+'</p>'+
							'<p class="fs_xs">'+'<i class="mui-icon iconfont icon-huangye_dianpumingcheng fs_xl">'+'</i>'+'<em>'+'</em>'+goods.suppliers_name+'</p>'+
							'<p class="fs_m">'+'<span class="span1 fs_xxs">'+goods.themeList[0].title+'</span>'+'<span class="span2 fs_xxs">'+goods.aroma[0].title+'</span>'+'</p>'+
							'<p class="fs_m">'+'<span class="span3 fs_xl">¥'+goods.shop_price+'/坛'+'</span>'+'<span class="span4 fs_xxs">'+goods.sales_sum+'坛已售'+'</span>'+'</p>'+
							'</div>'+
							'<div class="pr_img fs_xl fl">'+'<img src="'+goods.original_img+'" />'+'</div>'+
							'</a>';
							table.appendChild(li);
                        });
						$(".mui-pull").show();
					}
					else{
						if(mod != 'pullRefresh'){
						   $("#goodslist").html("<center class='fs_xl' style='line-height: 1.8em;padding: 0.3em 0;'>暂无相关商品</center>");
						   $(".mui-pull").hide();
						}
					}
				},'json');
				
			}
		</script>
		<script>
			$(function() {
//				$('.ch_nav').mmenu({
//					offCanvas: {
//             			position  : "right",
//             			zposition : "front"
//          		}
//				});
      			$(".ch_sub,.ch_res,.left_kb").click(function() {		
					$(".ch_box,.ch_btn").animate({
						width:'0'
					});
					$("#ch_nav").hide();
				});
				$("#ch_ri").click(function() {
					$("#ch_nav").show(1);
					$(".ch_box,.ch_btn").animate({
						width:'75%'
					},300);
				})
				$(".ch_res").click(function(){
					$(".ch_list li").removeClass("ch_right");
					$(".ch_list li").find("i").remove();
					getdatas('search',0);
				})
				$(".ch_tit i").click(function(){
					if($(this).hasClass("mui-icon-arrowdown")){
						$(this).removeClass("mui-icon-arrowdown").addClass("mui-icon-arrowup");
						$(this).parent().siblings(".ch_item").css("height","auto"); 
					}else{
						$(this).removeClass("mui-icon-arrowup").addClass("mui-icon-arrowdown");
						$(this).parent().siblings(".ch_item").css("height","3em");
					}
					$(this).parents(".ch_list").siblings().find(".ch_tit i").removeClass("mui-icon-arrowup").addClass("mui-icon-arrowdown");
					$(this).parents(".ch_list").siblings().find(".ch_item").css("height","3em");
				});
				$(".ch_item li").click(function(){
					if($(this).find("i").length<=0){
						$(this).addClass("ch_right").siblings().removeClass("ch_right");
						$(this).find("a").prepend('<i class="mui-icon mui-icon-checkmarkempty fs_xi"></i>');
						$(this).siblings().find("i").remove();
						getdatas('search',0);
					}else{
						$(this).removeClass("ch_right");
						$(this).find("i").remove();
						getdatas('search',0);
					}
				});
				$(".pr_m").on('tap',"li",function() {
  					var sur=$(this).find("a").attr("href");
  					mui.openWindow({
    					url: sur
  					});
				});
			});
		</script>
	</body>

</html>